<template>
    <el-container class="app-wrapper">
      <el-aside width="200px" class="sidebar-container">     
        
      </el-aside>
      <el-container class="container">
        <el-header class="header">港口堆存费管理系统
          <el-icon name="s-home" style="font-size: 24px; margin-right: 10px;"></el-icon>
        </el-header>
        <el-main class="main">setting</el-main>
      </el-container>
    </el-container>
  </template>
  
  <script lang="ts" setup>
  import { Document, Menu as IconMenu, Location, Setting, Delete } from '@element-plus/icons-vue';
  
  
  const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath);
  };
  
  const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath);
  };
  </script>
  
  <style scoped>
  .app-wrapper {
    height: 100vh;
    display: flex;
  }
  
  .sidebar-container {
    background-color: #2d3a4b;
    color: #fff;
    padding: 0;
    overflow-y: auto; /* 增加滚动支持 */
    scrollbar-width: thin; /* Firefox */
  }
  
  .sidebar-container::-webkit-scrollbar {
    width: 6px; /* Chrome, Safari 和 Opera */
  }
  
  .sidebar-container::-webkit-scrollbar-thumb {
    background-color: #888; /* 滚动条颜色 */
    border-radius: 10px;
  }
  
  .sidebar-container::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* 滚动条悬停颜色 */
  }
  
  .header {
    background-color: #409EFF;
    color: white;
    text-align: center;
    line-height: 60px; /* 调整此值以匹配您的header高度 */
  }
  
  .main {
    padding: 20px;
    background-color: #f0f2f5;
    overflow-y: auto;
  }
  </style>
  